Chart图表
图表的作用Axure创建图表的三种方式总结
图表的作用
图表是我们在产品中不可或缺的一部分;它主要承担着直观表现数据和客观分析数据的作用。很多决策分析会依靠图表进行输出,分析图表在不同模式、场景和时间的变换下,所产生各不相同的联系及趋势。
Axure创建图表的三种方式
使用绘画钢笔直接绘制 这种方法是比较适合做静态的图表,没有交互或者交互比较简单,只是为了简单的展示而存在。 主要是先建立坐标轴,然后点击插入,点击绘画即可绘画出图形,最后点击Esc则完成图形的绘制。
2. 使用Axhub Charts元件库快捷创建 这种方法是比较推荐的,首先需要下载该元件库并导入该元件库(会提供元件库的资源下载)。直接拖出一个想要的图表(这里以折线图讲解)。 你会看到一个文件夹,文件夹中有axhub-line-chart、axhub-line-data、axhub-line-config。其中里面的data就是你要配置的数据,而config就是对图表的属性进行设置。(每一种图表的文件夹都是一样的) axhub-line-data、axhub-line-config是中继器,中继器的数据配置很简单,不会的同学请阅读我前面的文章(5分钟玩转Axure之中继器) 不懂怎么配置的,或者一些特殊的配置无法实现的。可以查看该元件库的使用说明: 可以快速实现图表的建立,而且是带基本交互的图表。 3. 使用导入html代码的方式(需要有一点程序基础,可能会更方便) 这种方法就是我们去拷贝某种图表实现的代码,根据我们想要的效果,去修改代码的配置,然后在我们的页面中引用该html文件即可。其实这种方法和第二种方法有异曲同工之处,只是第二种方法是别人实现了代码,将代码放在服务器让你去访问从而进行展示的。如果自己搭建了服务器,那自己也可以建立属于自己的图表原件库。 以antv为例,其它的类似eCharts等等是操作都是一样的。首先选择一个我们想要实现的图表;复制其的html代码保存在电脑中,并设置为.html格式。 在页面中拖入一个内联框架,并设置链接一个外部的url或文件点击输入文件名。最好将文件放入你的原型发布生成文件夹的下面。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200613172230620.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4MDc0NjE3,size_16,color_FFFFFF,t_70)
总结
图表是在绘制原型时常常用到的。往往很多新手会消耗很多时间绘制图表,最后结果却并不理想,绘制的不美观、没有交互、消耗大量的精力事倍功半。这是因为方法不对,凡事可以去想最佳解决方案,在之前要去发现事物的本质是什么,这也是我们做产品经理最核心的方法。
|